<template>
  <div class="richEdit">
<div class="editor">
    <!-- top -->
    <div class="editor_head">
      <div @click="Back" class="Elogo web-font">
        <span style="color: black">we</span>teach
      </div>
      <div @click="ShowDrownBox" class="releaseBtn">
        Release<span style="font-size: 0.5rem" class="iconfont">&#xe619;</span>
      </div>
      <div v-show="isShowDrownBox" class="dropdownBox">
        <dropdownBox  @release="release" ref="dropdownBox"></dropdownBox>
      </div>
    </div>
    <!-- title -->
    <div class="editorTitle">
      <el-input
        clearable
        v-model="editorTitle"
        placeholder="Please input your title"
      ></el-input>
    </div>
    <div class="editorTag">
      <div class="tag">
        <div
          @click="clearTag(index)"
          class="tagItem"
          v-for="(item, index) in articleTagArr"
          :key="index"
        >
          {{ item
          }}<span style="font-size: 0.3rem" class="iconfont tagClear"
            >&#xe667;</span
          >
        </div>
      </div>
      <div class="addTag" @click="AddTag">+ Add tag</div>
      <div class="tagBox">
        <tag
          v-show="tagNums > 0 && tagShow == true"
          :tagNums="tagNums"
          :tagClass="tag"
          @itemClick1="itemClick1"
          @itemClick2="itemClick2"
          @itemClick3="itemClick3"
          @itemClick4="itemClick4"
        ></tag>
      </div>
    </div>
    <!-- Main -->
    <div class="editorMain">
      <quill-editor
        ref="myQuillEditor"
        v-model="content"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @ready="onEditorReady($event)"
      />
    </div>
    <!-- Or manually control the data synchronization -->
    <!-- <quill-editor
    :content="content"
    :options="editorOption"
    @change="onEditorChange($event)"
  /> -->
    <div class="remarks">
      <el-input
        clearable
        v-model="remarks"
        placeholder="Please input your remarks"
      ></el-input>
    </div>
  </div>
  </div>
</template>

<script>
import { getUniqueID } from "util/getUniqueID"; //生成图片唯一ID
import { mapState, mapMutations } from "vuex";
import axios from "axios"; //axios用于网络请求
// 公共组件
import tag from "components/tag/Tag";
// z子组件
import dropdownBox from "./editComps/dropdownBox";
import {getUploadtokenByQiniu} from 'network/upload'//获取图片上传的token
// 数据接口
import {getResourceBy_type_id} from "network/resource_manage"
// import {findOneRequire} from 'network/family_tutor'
  export default {
    name:'Edit',
     data() {
    return {
      content: "",
      ContentObj:"",
      uploadArea: "https://upload-z2.qiniup.com", //此处为七牛云华南区的空间地址
      uploadUrl: "https://we-teach-space.humianyuan.cn/", //上传后图片的域名地址
      token:'',//七牛云token
      editorOption: {
        // Some Quill options...
      },
      editorTitle: "", //标题
      remarks: "", //备注
      tagNums: 5, //用户可以添加的标签个数
      articleTagArr: [], //文章标签数组
      imgSrc:"",//图片地址
      cover:'',//封面图片
      tagShow: false, //control the tag components show or hide
      tag: [
        {
          stages: ["primary", "junior", "senior"],
          grades: [
            "first-grade",
            "second-grade",
            "third-grade",
            "fourth-grade",
            "fifth-grade",
            "sixth-grade",
          ],
          subjects: [
            "chinese",
            "math",
            "english",
            "politics",
            "geography",
            "biology",
            "chemistry",
            "history",
            "physics",
          ],
          others:["Children", "primary school", "education", "education policy", "primary and secondary schools", "senior high school entrance examination", "college entrance examination", "junior high school to junior high school"],
          stagesC: ["小学", "初中", "高中"],
          gradesC: ["一年级", "二年级", "三年级", "四年级", "五年级", "六年级"],
          subjectsC: [
            "语文",
            "数学",
            "英语",
            "政治",
            "地理",
            "生物",
            "化学",
            "历史",
            "物理",
          ],
          othersC:["幼儿","小学","教育","教育政策","中小学","中考","高考","小升初"]
        },
      ], //传入tag组件的可选值
      isShowDrownBox: false,
      login_nickname:'admin',
      login_status:'admin',
      login_user:'admin001'

    };
  },
  methods: {
    ...mapMutations(['changenavIndex','changePublicNav']),
    onEditorBlur(quill) {
      console.log("editor blur!", quill);
    },
    onEditorFocus(quill) {
      console.log("editor focus!", quill);
    },
    onEditorReady(quill) {
      console.log("editor ready!", quill);
    },
    Back() {
      this.$router.go(-1);
    },
    // 标签分类点击
    itemClick1(index) {
      let that = this;
      // console.log(that.tag[0].stagesC[index]);
      let pushflag = true; //用于插入前判断
      that.articleTagArr.filter(function (curvalue) {
        if (curvalue == that.tag[0].stagesC[index]) {
          pushflag = false;
        }
      });
      // 未插入的才插入
      if (pushflag == true) {
        that.articleTagArr.push(that.tag[0].stagesC[index]);
        that.tagNums--;
      } else {
        innerWidth > 768
          ? this.$message({
              message: "Please don't add the same tag!",
              type:'warning',
              duration: 1500,
            })
          : '';
      }
    },
    itemClick2(index) {
      let that = this;
      // console.log(that.tag[0].gradesC[index]);
      let pushflag = true; //用于插入前判断
      that.articleTagArr.filter(function (curvalue) {
        if (curvalue == that.tag[0].gradesC[index]) {
          pushflag = false;
        }
      });
      // 未插入的才插入
      if (pushflag == true) {
        that.articleTagArr.push(that.tag[0].gradesC[index]);
        that.tagNums--;
      } else {
        innerWidth > 768
          ? this.$message({
              message: "Please don't add the same tag!",
              type:'warning',
              duration: 1500,
            })
          : '';
      }
    },
    itemClick3(index) {
      let that = this;
      // console.log(that.tag[0].subjectsC[index]);
      let pushflag = true; //用于插入前判断
      that.articleTagArr.filter(function (curvalue) {
        if (curvalue == that.tag[0].subjectsC[index]) {
          pushflag = false;
        }
      });
      // 未插入的才插入
      if (pushflag == true) {
        that.articleTagArr.push(that.tag[0].subjectsC[index]);
        that.tagNums--;
      } else {
        innerWidth > 768
          ? this.$message({
              message: "Please don't add the same tag!",
              type:'warning',
              duration: 1500,
            })
          : '';
      }
    },
    itemClick4(index) {
      let that = this;
      // console.log(that.tag[0].subjectsC[index]);
      let pushflag = true; //用于插入前判断
      that.articleTagArr.filter(function (curvalue) {
        if (curvalue == that.tag[0].othersC[index]) {
          pushflag = false;
        }
      });
      // 未插入的才插入
      if (pushflag == true) {
        that.articleTagArr.push(that.tag[0].othersC[index]);
        that.tagNums--;
      } else {
        innerWidth > 768
          ? this.$message({
              message: "Please don't add the same tag!",
              type:'warning',
              duration: 1500,
            })
          : '';
      }
    },
    // add th tag
    AddTag() {
      this.tagShow = !this.tagShow;
    },
    // 清除标签
    clearTag(index) {
      let that = this;
      this.tagNums++;
      this.articleTagArr = this.articleTagArr.filter(function (curValue) {
        return curValue != that.articleTagArr[index];
      });
    },
    // 显示隐藏下拉box
    ShowDrownBox() {
      this.isShowDrownBox = !this.isShowDrownBox;
    },
    // 上传编辑区的图片数组到器牛云，并保存数据到数据库
    release() {
      let time = new Date().getTime()
      if(this.articleTagArr.length<=0||this.editorTitle==''||this.content==''){
        console.log("this.articleTagArr.length:",this.articleTagArr.length,"this.editorTitle:",this.editorTitle,"this.content:",this.content)
         innerWidth>768 ? this.$message({message:'请填写完全!',type:'warning',duration:1500}) : this.$message({message:'Please complete your requirement!',duration:1500})
      }else{
         console.log("coverOnlineSrc:",this.$refs.dropdownBox.coverOnlineSrc)
         this.$message({message:'成功发布!',type:'success',duration:1500})
         this.$router.go(-1)
        //  _id,uid,nickname,title,cover,content tag
          //  alterRequire(this.$route.query.id,this.login_user,unescape(this.login_nickname),this.editorTitle,this.$refs.dropdownBox.coverOnlineSrc,this.content,this.articleTagArr).then(res=>{
          //    console.log("插入需求的后台响应：",res)
          //    if(res.status==200){
          //      innerWidth>768 ? this.$message({message:'Release successfully!',duration:1500}) : this.$toast.show('Release successfully!',1500)
          //      this.$router.push('/home');//后期改为跳转到需求市场
          //       this.content = '';
          //       this.editorTitle = '';
          //       this.$refs.dropdownBox.coverOnlineSrc = ''
          //       this.$refs.dropdownBox.coverImg = ''
          //       this.articleTagArr = []
          //    }
          //  })
      }
  
    },
    submitArrImg(token,file,key) {
      let that = this;
      let formData = new FormData(); //使用FormData.append来添加键/值对到表单里面；
      formData.append("file", file); //直接上传file文件，此处是文件对象方式上传, filePath_or_stream是文件数据流
      formData.append("token", token);
      formData.append("key",key);//上传的图片名称
      // 请求头的Content-Type 用于指示资源的MIME类型【media type】
      // 设置媒体类型为 multipart/form-data，表示此时的表单数据携带的是二进制流数据
      axios
        .post(that.uploadArea, formData, {
          headers: { "Content-Type": "multipart/form-data" },
        })
        .then((res) => {
          console.log(res);
          if (res.status == 200) {
            that.mgSrc = ""; //图片上传后的地址
            that.imgSrc = that.uploadUrl + res.data.key;
            console.log("编辑内容所包含的图片的线上地址：" + that.imgSrc);
            let quill = that.$refs.myQuillEditor.quill; //1.获取到富文本装着数据的对象
            let length = that.$refs.myQuillEditor.quill.selection.savedRange.index; //2.获取光标所在的位置
            quill.insertEmbed(length, "image", that.imgSrc); //3.把图片插到光标的地方(第三个参数是图片的url)
            quill.setSelection(length + 1); //quill.setSelection(length + 1)
          } else {
            that.$message.error("上传失败");
          }
        });
    },
    arrToString(arr){//数组转为字符串
    let Str = ''
    arr.filter(function(Curv,index){
        Str = Str + '<p style="text-indent: 2em;">'+Curv+'</p>'
    })
    return Str;
  },
  },
  computed: {
    //  ...mapState({
    //     login_status:(state) => state.login_status,
    //     login_user:(state) => state.login_user,
    //     login_nickname:(state) => state.login_nickname
    //   }),
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
  mounted() {
    // console.log("this is current quill instance object", this.editor);
  },
  activated() {
    let that = this;
    this.changePublicNav(false)
    that.articleTagArr = []
    // this.changePublicNav(false);
    console.log("that.$route:",that.$route)
    getResourceBy_type_id(that.$route.query.type,that.$route.query.id).then((res) => {
      console.log("type:",that.$route.query.type,",id:",that.$route.query.id)
       console.log(that.$route.query.type+"模块的资源回应:",res)
        let type = that.$route.query.type
        if(type=="realtimes"){
          that.content = that.arrToString(res.content);
          that.editorTitle = res.title;
          that.articleTagArr = res.tag
        }else if(type=="policy"){
          that.content = that.arrToString(res.content);
          that.editorTitle = res.title;
          that.articleTagArr = res.tag
        }else if(type=="subject"){
          that.content = that.arrToString(res.article);
          that.editorTitle = res.title;
          that.$refs.dropdownBox.coverOnlineSrc = res.img;
          that.articleTagArr = res.tag
        }else if(type=="nous"){
          that.content = that.arrToString(res.article);
          that.editorTitle = res.title;
        }else if(type=="test"){
          that.content = that.arrToString(res.content);
          that.editorTitle = res.title;
          that.articleTagArr = res.tag
        }else if(type=="school"){
          that.content = that.arrToString(res.campus_brief);
          that.editorTitle = res.school;
          that.$refs.dropdownBox.coverOnlineSrc = res.school_img;
          that.articleTagArr = res.tag
        }else if(type=="notice"){
          that.content = that.arrToString(res.content);
          that.editorTitle = res.title;
          that.$refs.dropdownBox.coverOnlineSrc = res.img;
          that.articleTagArr = res.tag
        }
    });
    var toolbar = document.getElementsByClassName("ql-toolbar");
    // 1.创建toolbar子结点myql_image
    var myql_image = document.createElement("span");
    myql_image.classList.add("ql-formats", "myql-image", "iconfont");
    myql_image.innerHTML = "&#xe652;";
    toolbar[0].appendChild(myql_image);

    var subimg = document.getElementsByClassName("myql-image");
    // 2.创建myql_image子结点 input
    var inputFile = document.createElement("input");
    inputFile.classList.add("EditorSubmit");
    inputFile.setAttribute("type", "file"); //input的类型为文件
    inputFile.setAttribute("accept", "image/png, image/jpeg"); //只能上传图片文件
    subimg[0].appendChild(inputFile);

    // 3.给input 添加监听事件
    var editImg = document.getElementsByClassName("EditorSubmit")[0];
    // 文件上传操作
    editImg.addEventListener("change", function (e) {
      let img = "";
      e = e || window.event;
      img = e.target.files[0]; //获取选择的图片
      console.log("img:",img)
      let imgname = 'wt_'+getUniqueID()+'_'+e.target.files[0].name;
      console.log("imgname:",imgname)
      // 3.1获取token
       // 获取token 需要三个参数：1.username【用户账号】 2.status【用户身份】 3.fileName【文件名】
      getUploadtokenByQiniu(that.login_user,that.login_status, imgname).then(res=>{
        that.token = res.token;
        console.log("接收到后台传过来的七牛云token:",that.token)
         // 3.2上传图片 token,file,key
        that.submitArrImg(that.token,img,imgname)
       
      })  
    });
  },
  deactivated() {
    this.changePublicNav(true)
  },
  components: {
    tag,
    dropdownBox,
  },
  }
</script>

<style lang="less" scoped>
// .richEdit{
  
// }
body {
  background-color: #e9ecef;
}
/deep/.EditorSubmit {
  cursor: pointer;
  position: absolute;
  left: -50%;
  width: 2rem;
  opacity: 0;
}
/deep/.myql-image {
  color: #444444;
  cursor: pointer;
  position: relative;
}
/deep/.myql-image::before {
  display: none;
  position: absolute;
  left: 0%;
  width: 2rem;
  bottom: -85%;
  color: #ffffff;
  content: "上传图片";
  font-size: 0.5rem;
  border-radius: 5px;
  background-color: rgba(30, 30, 30, 0.9);
  padding: 8px 5px;
}
/deep/.myql-image::after {
  display: none;
  content: "";
  position: absolute;
  top: 68%;
  left: 30%;
  width: 0;
  height: 0;
  border-bottom: 10px solid rgba(30, 30, 30, 0.9);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
/deep/ .myql-image:hover.myql-image::before {
  display: block;
}
/deep/ .myql-image:hover.myql-image::after {
  display: block;
}
/deep/ input::-webkit-input-placeholder {
  /* WebKit browsers 适配谷歌 */
  color: #888888;
}
/deep/ input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 适配火狐 */
  color: #2f2f2f;
}
/deep/ input::-moz-placeholder {
  /* Mozilla Firefox 19+ 适配火狐 */
  color: #2f2f2f;
}
/deep/ input:-ms-input-placeholder {
  /* Internet Explorer 10+  适配ie*/
  color: #2f2f2f;
}
/deep/ .ql-editor {
  height: 500px;
  margin-bottom: 50px;
}

.editor {
  background-color: #e9ecef;
  padding-bottom: 0.6rem;
}
.editor_head {
  position: relative;
  width: 100%;
  height: 1.8rem;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.8rem;
  .Elogo {
    cursor: pointer;
    color: #13a552;
    font-size: 1rem;
    line-height: 1.8rem;
    margin-left: 0.6rem;
    transition: all 0.3s;
  }
  .Elogo:hover {
    transform: scale(1.1);
  }
  .dropdownBox {
    position: absolute;
    z-index: 10;
    right: 1%;
    top: 1.2rem;
  }
  .releaseBtn {
    cursor: pointer;
    margin-top: 0.25rem;
    background-color: #13a552;
    color: #ffffff;
    margin-right: 0.6rem;
    height: 1.2rem;
    font-size: 0.5rem;
    padding: 0.08rem 0.2rem 0.01rem;
    line-height: 1.2rem;
    border-radius: 10%;
  }
  .releaseBtn:hover {
    box-sizing: border-box;
    border: 1px solid #00633e;
  }
}
.editorTitle,
.remarks {
  margin: 0 auto;
  width: 98%;
  margin-bottom: 0.3rem;
}
.editorTag {
  // background-color: brown;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  display: flex;
  left: 1%;
  position: relative;
  width: 100%;
  height: 1.3rem;
  margin-bottom: 0.3rem;
  .tag {
    display: flex;
    flex-wrap: wrap;
    z-index: 0;
    left: 5%;
    .tagItem {
      box-sizing: border-box;
      line-height: 1rem;
      height: 1rem;
      margin: 5px;
      padding: 0.01rem 0.2rem 0.01rem;
      font-size: 0.5rem;
      border-radius: 3px;
      color: #6c757d;
      border: solid 1px #6c757d;
      cursor: pointer;
      .tagClear {
        display: none;
      }
    }
    .tagItem:hover {
      background-color: #6c757d;
      color: #ffffff;
      .tagClear {
        display: inline-block;
      }
    }
  }
  .tagBox {
    top: 1.5rem;
    position: absolute;
    width: 80%;
    z-index: 20;
  }
  .addTag {
    display: inline-block;
    cursor: pointer;
    border-radius: 6%;
    border: solid 1px #6c757d;
    color: #6c757d;
    box-sizing: border-box;
    line-height: 1.1rem;
    height: 1.2rem;
    font-size: 0.5rem;
    font-weight: 300;
    padding: 0.01rem 0.2rem 0.01rem;
  }
  .addTag:hover {
    color: #ffffff;
    background-color: #6c757d;
  }
}
.editorMain {
  background-color: #ffffff;
  margin: 0 auto;
  width: 98%;
  margin-bottom: 0.5rem;
}

/deep/.ql-formats {
  position: relative;
  .ql-video,
  .ql-image {
    display: none;
  }
  .ql-bold::before,
  .ql-italic::before,
  .ql-underline::before,
  .ql-strike::before,
  .ql-blockquote::before,
  .ql-code-block::before,
  .ql-header[value="1"]::before,
  .ql-header[value="2"]::before,
  .ql-list[value="ordered"]::before,
  .ql-list[value="bullet"]::before,
  .ql-script[value="sub"]::before,
  .ql-script[value="super"]::before,
  .ql-indent[value="-1"]::before,
  .ql-indent[value="+1"]::before,
  .ql-direction::before,
  .ql-size::before,
  .ql-header::before,
  .ql-color::before,
  .ql-background::before,
  .ql-font::before,
  .ql-align::before,
  .ql-clean::before,
  .ql-link::before,
  .myql-image::before {
    display: none;
    position: absolute;
    left: 0%;
    bottom: -150%;
    color: #ffffff;
    content: "加粗";
    font-size: 0.5rem;
    border-radius: 5px;
    background-color: rgba(30, 30, 30, 0.9);
    padding: 8px 5px;
  }
  .ql-bold::after,
  .ql-italic::after,
  .ql-underline::after,
  .ql-strike::after,
  .ql-blockquote::after,
  .ql-code-block::after,
  .ql-header[value="1"]::after,
  .ql-header[value="2"]::after,
  .ql-list[value="ordered"]::after,
  .ql-list[value="bullet"]::after,
  .ql-script[value="sub"]::after,
  .ql-script[value="super"]::after,
  .ql-indent[value="-1"]::after,
  .ql-indent[value="+1"]::after,
  .ql-direction::after,
  .ql-size::after,
  .ql-header::after,
  .ql-color::after,
  .ql-background::after,
  .ql-font::after,
  .ql-align::after,
  .ql-clean::after,
  .ql-link::after,
  .myql-image::after {
    display: none;
    content: "";
    position: absolute;
    top: 68%;
    left: 8%;
    width: 0;
    height: 0;
    border-bottom: 10px solid rgba(30, 30, 30, 0.9);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
  }
  .ql-italic::before {
    content: "斜体";
    left: 25%;
  }
  .ql-italic::after {
    left: 33%;
  }
  .ql-underline::before {
    content: "下划线";
    left: 50%;
    width: 1.5rem;
  }
  .ql-underline::after {
    left: 58%;
  }
  .ql-strike::before {
    content: "删除线";
    left: 75%;
    width: 1.5rem;
  }
  .ql-strike::after {
    left: 83%;
  }
  .ql-blockquote::before {
    content: "引用";
  }
  .ql-blockquote::after {
    left: 16%;
  }
  .ql-code-block::before {
    left: 50%;
    content: "插入代码";
    width: 2rem;
  }
  .ql-code-block::after {
    left: 65%;
  }
  .ql-header[value="1"]::before {
    content: "一级标题";
    width: 2rem;
  }
  .ql-header[value="1"]::after {
    left: 12%;
  }
  .ql-header[value="2"]::before {
    left: 50%;
    content: "二级标题";
    width: 2rem;
  }
  .ql-header[value="2"]::after {
    left: 62%;
  }
  .ql-list[value="ordered"]::before {
    content: "有序列表";
    width: 2rem;
  }
  .ql-list[value="ordered"]::after {
    left: 12%;
  }
  .ql-list[value="bullet"]::before {
    left: 50%;
    content: "无序列表";
    width: 2rem;
  }
  .ql-list[value="bullet"]::after {
    left: 62%;
  }
  .ql-script[value="sub"]::before {
    content: "下标";
  }
  .ql-script[value="sub"]::after {
    left: 12%;
  }
  .ql-script[value="super"]::before {
    left: 50%;
    content: "上标";
    width: 1rem;
  }
  .ql-script[value="super"]::after {
    left: 62%;
  }
  .ql-indent[value="-1"]::before {
    content: "向左缩进";
    width: 2rem;
  }
  .ql-indent[value="-1"]::after {
    left: 15%;
  }
  .ql-indent[value="+1"]::before {
    content: "向右缩进";
    width: 2rem;
  }
  .ql-indent[value="+1"]::after {
    left: 65%;
  }
  .ql-direction::before {
    content: "文本逆置";
    width: 2rem;
  }
  .ql-direction::after {
    left: 30%;
  }
  .ql-size::before {
    content: "字体大小";
    width: 2rem;
  }
  .ql-size::after {
    left: 30%;
  }
  .ql-header::before {
    content: "标题大小";
    width: 2rem;
  }
  .ql-header::after {
    left: 30%;
  }
  .ql-color::before {
    content: "字体颜色";
    width: 2rem;
  }
  .ql-color::after {
    left: 35%;
  }
  .ql-background::before {
    content: "字体背景";
    width: 2rem;
  }
  .ql-background::after {
    left: 45%;
  }
  .ql-font::before {
    content: "文本字体";
    width: 2rem;
  }
  .ql-font::after {
    left: 30%;
  }
  .ql-align::before {
    content: "对齐方式";
    width: 2rem;
  }
  .ql-clean::before {
    content: "清除格式";
    width: 2rem;
  }
  .ql-link::before {
    content: "插入链接";
    width: 2rem;
  }
  .myql-image::before {
    content: "上传图片";
    width: 2rem;
  }
  .ql-align::after,
  .ql-clean::after,
  .ql-link::after {
    left: 30%;
  }
  .myql-image::after {
    left: 65%;
  }
  .ql-bold:hover.ql-bold::before,
  .ql-italic:hover.ql-italic::before,
  .ql-underline:hover.ql-underline::before,
  .ql-strike:hover.ql-strike::before,
  .ql-blockquote:hover.ql-blockquote::before,
  .ql-code-block:hover.ql-code-block::before,
  .ql-header[value="1"]:hover.ql-header[value="1"]::before,
  .ql-header[value="2"]:hover.ql-header[value="2"]::before,
  .ql-list[value="ordered"]:hover.ql-list[value="ordered"]::before,
  .ql-list[value="bullet"]:hover.ql-list[value="bullet"]::before,
  .ql-script[value="sub"]:hover.ql-script[value="sub"]::before,
  .ql-script[value="super"]:hover.ql-script[value="super"]::before,
  .ql-indent[value="-1"]:hover.ql-indent[value="-1"]::before,
  .ql-indent[value="+1"]:hover.ql-indent[value="+1"]::before,
  .ql-direction:hover.ql-direction::before,
  .ql-size:hover.ql-size::before,
  .ql-header:hover.ql-header::before,
  .ql-color:hover.ql-color::before,
  .ql-background:hover.ql-background::before,
  .ql-font:hover.ql-font::before,
  .ql-align:hover.ql-align::before,
  .ql-clean:hover.ql-clean::before,
  .ql-link:hover.ql-link::before,
  .myql-image:hover.myql-image::before {
    display: block;
  }
  .ql-bold:hover.ql-bold::after,
  .ql-italic:hover.ql-italic::after,
  .ql-underline:hover.ql-underline::after,
  .ql-strike:hover.ql-strike::after,
  .ql-blockquote:hover.ql-blockquote::after,
  .ql-code-block:hover.ql-code-block::after,
  .ql-header[value="1"]:hover.ql-header[value="1"]::after,
  .ql-header[value="2"]:hover.ql-header[value="2"]::after,
  .ql-list[value="ordered"]:hover.ql-list[value="ordered"]::after,
  .ql-list[value="bullet"]:hover.ql-list[value="bullet"]::after,
  .ql-script[value="sub"]:hover.ql-script[value="sub"]::after,
  .ql-script[value="super"]:hover.ql-script[value="super"]::after,
  .ql-indent[value="-1"]:hover.ql-indent[value="-1"]::after,
  .ql-indent[value="+1"]:hover.ql-indent[value="+1"]::after,
  .ql-direction:hover.ql-direction::after,
  .ql-size:hover.ql-size::after,
  .ql-header:hover.ql-header::after,
  .ql-color:hover.ql-color::after,
  .ql-background:hover.ql-background::after,
  .ql-font:hover.ql-font::after,
  .ql-align:hover.ql-align::after,
  .ql-clean:hover.ql-clean::after,
  .ql-link:hover.ql-link::after,
  .myql-image:hover.myql-image::after {
    display: block;
  }
}
</style>